.cube-grid {
  $delayRange: 0.4s;
  margin: auto;

  .cube {
    width: 33.33%;
    height: 33.33%;
    float: left;
    animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
  }

  .cube1 { animation-delay: $delayRange * 0.50 }
  .cube2 { animation-delay: $delayRange * 0.75 }
  .cube3 { animation-delay: $delayRange }
  .cube4 { animation-delay: $delayRange * 0.25 }
  .cube5 { animation-delay: $delayRange * 0.50 }
  .cube6 { animation-delay: $delayRange * 0.75 }
  .cube7 { animation-delay: 0.0s }
  .cube8 { animation-delay: $delayRange * 0.25 }
  .cube9 { animation-delay: $delayRange * 0.50 }
}

@keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% { transform:scale3D(1.0, 1.0, 1.0) }
  35%           { transform:scale3D(0.0, 0.0, 1.0) }
}
